@import "../base.less";
.col-20 {
  max-width: 20%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20%;
  flex: 0 0 20%;
}
.col-80 {
  max-width: 80%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80%;
  flex: 0 0 80%;
}
.col-25 {
  max-width: 25%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  flex: 0 0 25%;
}
.col-75 {
  max-width: 75%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 75%;
  flex: 0 0 75%;
}
img {
  width: 100%;
}
.join-title {
  position: relative;
  text-align: center;
  font-weight: normal;
  h2 {
    position: absolute;
    left: 0;
    top: .9rem;
    width: 100%;
    .fs(35);
    color: #fff;
    font-weight: normal;
  }
  h3 {
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: 100%;
    .fs(28);
    color: #bbb;
    font-weight: normal;
    &.second {
      top: 1.4rem;
    }
  }
}
.join-guide {
  padding: .3rem .25rem;
  p {
    .fs(28);
    color: #666;
  }
}
.join-item {
  padding: .25rem;
  border-top: 1px solid #d0d0d0;
  .item-job-name {
    margin-bottom: .1rem;
    .fs(35);
    color: #121212;
    span {
      font-family: 'Arail';
    }
  }
  .item-jon-info {
    .fs(24);
    line-height: .21rem;
    color: #666;
  }
  .button-area {
    margin-top: .2rem;
    text-align: center;
    .fs(28);
    color: #121212;
    line-height: .3rem;
    .button-item {
      display: inline-block;
      width: 1.42rem;
      border: 1px solid #ddd;
      background: url(../../img/aboutUs/introduce_arrow.png) no-repeat 95% center;
      background-size: .05rem;
      span {
        color: #808080;
      }
    }
  }
}
.join-item-detail {
  padding: .1rem .25rem .35rem .25rem;
  background-color: #f3f3f3;
  .detail-title {
    margin: .2rem 0 .1rem 0;
    .fs(28);
    color: #121212;
  }
  .detail-info {
    p {
      padding-left: .1rem;
      .fs(24);
      line-height: .21rem;
      color: #666;
      &.first:before {
        margin-left: -.1rem;
        content: '1.';
      }
      &.two:before {
        margin-left: -.1rem;
        content: '2.';
      }
      &.three:before {
        margin-left: -.1rem;
        content: '3.';
      }
      &.four:before {
        margin-left: -.1rem;
        content: '4.';
      }
      &.five:before {
        margin-left: -.1rem;
        content: '5.';
      }
      &.six:before {
        margin-left: -.1rem;
        content: '6.';
      }
      &.seven:before {
        margin-left: -.1rem;
        content: '7.';
      }
      &.eight:before {
        margin-left: -.1rem;
        content: '8.';
      }
      &.nine:before {
        margin-left: -.1rem;
        content: '9.';
      }
      &.ten:before {
        margin-left: -.1rem;
        content: '10.';
      }
    }
  }
}
.job-email {
  padding: .25rem 0;
  text-align: center;
  background-color: #fff;
  p {
    color: #000;
    .fs(35);
    line-height: .32rem;
  }

}
.join-header {
  padding: .1rem .05rem;
  background-color: #f0f1f5;
  text-align: center;
  line-height: .4rem;
  .col {
    margin: 0 .05rem;
    background-color: #fff;
    .fs(28);
    &.active {
      color: #fff;
      background-color: #0090ff;
    }
  }
}
.join-job-list {
  .fs(28);
  line-height: .4rem;
  .job-item {
    padding: 0 .1rem;
    border-bottom: 1px solid #e8e8e8;
    .orange-text {
      text-align: right;
      color: #ff5a00;
    }
  }
}
.join-job-detail {
  padding: 0 .2rem;
  .job-title {
    .fs(35);
    line-height: .6rem;
    text-align: center;
    border-bottom: 1px solid #bebebe;
  }
  h3 {
    .fs(28);
    line-height: .3rem;
  }
  p {
    .fs(28);
    color: #666;
    line-height: .2rem;
  }
  .mt-2 {
    margin-top: .2rem;
  }
  .job-footer {
    padding: .2rem;
    margin-top: .2rem;
    border-top: 1px solid #bebebe;
    text-align: center;
    h2 {
      .fs(35);
    }
    h4 {
      .fs(20);
    }
  }
}